import React, { Component } from "react";
import BaseComponent from "@/components/BaseComponent";
import moment from "moment";
import { Card, Drawer, Popconfirm, Tabs } from "antd";
import StandardTable from "@/components/StandardTable";
import { connect } from "dva";
import { defDrawerWidth } from "@/defaultSettings";
import styles from "@/pages/SystemInit/ArticleSetting/AddView/index.less";

@connect(({ user, articlesetting, loading }) => ({
  data: articlesetting.data,
  isLoading: loading.effects["articlesetting/listByPage"]
}))
class ArticleListView extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  listByPage = (params = {}) => {
    this.execHttp("articlesetting/listByPage", {
      group_id: this.props.groupId,
      ...params
    });
  };

  componentDidMount() {
    this.listByPage({});
  }

  columns = [
    {
      title: "编号",
      sorter: false,
      key: "col1",
      width: 80,
      render: (text, record, index) => {
        return `${index + 1}`;
      }
    },
    {
      title: "标题",
      sorter: false,
      key: "title",
      dataIndex: "title"
    },
    {
      title: "发布时间",
      sorter: false,
      key: "publish_time",
      render: (text, record, index) => {
        const { publish_time } = record;
        return publish_time
          ? moment(publish_time).format("YYYY-MM-DD HH:mm:ss")
          : "";
      }
    },
    {
      title: "发布人员",
      sorter: false,
      key: "username",
      dataIndex: "username"
    },
    {
      title: "操作",
      sorter: false,
      key: "operate",
      render: (text, record, index) => {
        return (
          <div>
            <a
              style={{ cursor: "pointer", marginRight: "16px" }}
              onClick={() => {
                this.handlePreviewClick(record);
              }}
            >
              详情
            </a>
          </div>
        );
      }
    }
  ];

  render() {
    const { onClose, visible } = this.props;
    return (
      <Drawer
        title={"新增文章"}
        placement="right"
        width={defDrawerWidth}
        closable={true}
        onClose={e => {
          if (onClose) {
            onClose(e);
          }
        }}
        visible={visible}
      >
        <Card bordered={true} style={{ marginTop: "16px" }}>
          <StandardTable
            hasSelection={false}
            onChange={this.handleTableChange}
            selectedRows={[]}
            loading={this.props.isLoading}
            bordered
            data={this.props.data}
            columns={this.columns}
            rowKey="id"
          />
        </Card>
      </Drawer>
    );
  }

  handleTableChange = (pagination, filters, sorter) => {
    const params = {
      currentPage: pagination.current,
      pageSize: pagination.pageSize
    };
    this.listByPage(params);
  };

  handlePreviewClick = record => {
    const { onDetailClick } = this.props;
    if (onDetailClick) {
      onDetailClick(record);
    }
  };
}

export default ArticleListView;
